<docs>
  ## mheader 组件，通用头部组件
  ## props
  * type <index|common> 标题类型
  * title 主标题
  * titleSub 副标题
</docs>
<template>
  <div class="header" :class="type">
    <span class="arrow" @click="back_btn"></span>
    <h3 class="title"> {{title}}</h3>
    <!-- <h4 class="title-sub">{{titleSub}}</h4> -->
  </div>
</template>
<script>
export default {
  name: 'mheader',
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true
    },
    titleSub: {
      type: String
    }
  },
  methods:{

    // 按钮点击
    back_btn() {
      this.$emit('back_btn');
    },
  },
};
</script>
<style lang="scss" scoped>
  @import '~common/scss/variable.scss';
  .header {
    position: relative;
    width: $width-100;
    height: 7%;
    color: #fff;
    box-sizing: border-box;
    padding-top: 0;
    background-color: #2e7ef7;
    &.index {
      background-size: $width-100 300px;
      .title{
        box-sizing: border-box;
        padding: 0.3rem 0;
        text-align: center;
        font-size: 48px;
        font-weight: bold;
      }
    }
    .title {
      padding: $padding-base 0 $padding-base * 2 / 3  0;
      font-size: 45px;
      text-align: center;
      line-height: 1;
    }
    /* 箭头 */
    .arrow::before{
      position: absolute;
      content: "";
      width: 30px;
      height: 30px;
      border-top: 5px solid #fff;
      border-left: 5px solid #fff;
      transform:  rotate(-45deg);
      margin: 40px 0 0 50px;
    }
  }
</style>

